<template>
	<view class="report-wrapper">
		<view class="cell">
			<view class="left">
				<view class="cell-icon">
					<view class="iconfont icon-zhuyi"></view>
				</view>
				<view class="left-title">
					您要举报该内容：
				</view>
			</view>
			<view class="right">
				<picker :value="reportContentValue" mode=selector :range="reportContentList" @change="handleConfirmGoal">
					<text class="uni-input">{{ reportContentList[reportContentValue] }}</text>
					<u-icon class="cell-icon" name="arrow-right"></u-icon>
				</picker>
			</view>
		</view>
		<view class="content-main">
			<view class="tip">您要举报的理由</view>
			<textarea class="textarea" v-model="reportReason" placeholder="请输入" maxlength="140" row="10" />
			<view class="content-length">{{ reportReason.length }}/140</view>
			<view class="submit" @click="handleReport">提交举报</view>
		</view>
		
		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin" open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import loginMixin from '@/utils/loginMixin.js'
	import { report } from '@/api/goal.js'

	export default {
		mixins: [loginMixin],

		data() {
			return {
				showLoginDialog: false, // 显示登陆弹窗
				isSubmit: false,
				userSignRecordId: null,
				reportContentValue: 0,
				reportReason: '',
				reportContentList: ['含有色情、淫秽内容', '含有低俗、辱骂内容', '含有反社会、血腥暴力等内容', '含有违禁内容（毒品、枪支等）']
			}
		},

		onLoad(options) {
			this.userSignRecordId = options.userSignRecordId
		},

		methods: {
			handleConfirmGoal(e) {
				this.reportContentValue = e.detail.value
			},
			
			async handleReport() {
				try{
					if (this.isSubmit) return
					if (!this.reportReason) {
						uni.showToast({
							title: '请输入举报理由',
							icon: 'none'
						})
						return
					}
					this.isSubmit = true
					const data = JSON.stringify({
						openId: this.user.openId,
						userSignRecordId: this.userSignRecordId,
						reportContent: this.reportContentList[this.reportContentValue],
						reportReason: this.reportReason
					})
					const res = await report({ data })
					uni.showToast({
						title: res.resultMsg,
						icon: "none"
					})
					this.isSubmit = false
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}catch(e){
					//TODO handle the exception
					this.isSubmit = false
					uni.showToast({
						title: e.resultMsg,
						icon: "none"
					})
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 32rpx 40rpx;
		background-color: #f5f5f5;
	}

	.left {
		display: flex;
		align-items: center;
		padding-right: 12rpx;
		font-size: 24rpx;
	}

	.right {
		min-width: 150rpx;
		color: #7c94bf;
		text-align: right;
		font-size: 24rpx;
	}

	.cell-icon {
		margin-right: 12rpx;
	}

	.icon-zhuyi {
		font-size: 40rpx;
		color: #ffbd00;
	}
	
	.content-main {
		padding: 0 40rpx;
		
		.tip {
			margin-bottom: 28rpx;
		}
		
		.textarea {
			width: 100%;
			min-height: 64rpx;
			padding: 12rpx;
			background-color: #f5f5f5;
		}
		.content-length {
			text-align: right;
			color: #c6c6c6;
		}
		
		.submit {
			margin-top: 100rpx;
			border-radius: 8rpx;
			padding: 20rpx 0;
			background-color: #108EE9;
			text-align: center;
			letter-spacing: 20rpx;
			font-size: 60rpx;
			color: #fff;
		}
	}
	
	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;
	
		.tip {
			padding: 50rpx 0;
		}
	}
</style>
